<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        :formProp="formData"
        @search="search"
        @change="change"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isActive === index ? 'table-top-active' : 'table-top'"
            size="mini"
            v-for="(item, index) in focuses"
            :key="'tab' + index"
            @click="tabChange(item.focus)"
          >
            <template v-if="item.focus === 'all'">全部</template>
            <template v-else-if="item.focus === 'unsubmitted'"
              >待提交 ({{ totalNum }})</template
            >
            <template v-else-if="item.focus === 'approval'">审批中</template>

            <template v-else-if="item.focus === 'return'">审批退回</template>
          </el-button>
        </div>
        <div class="ccui-extend-btn">
          <el-button
            size="mini"
            type="primary-icon-big"
            @click="handleGoNew"
            icon="icon-ccui-add-sup"
            >新增</el-button
          >
        </div>
          <template slot="search">
              <el-input
                  v-model="formData.writeoffName"
                  clearable
                  searchLabel="冲销单名称"
                  placeholder="请输入冲销单名称模糊查询"
                  @blur="handleTrim('writeoffName')"
              ></el-input>
              <el-input
                  v-model="formData.contractCode"
                  clearable
                  searchLabel="合同编号"
                  placeholder="请输入合同编号模糊查询"
                  @blur="handleTrim('settlementCode')"
              ></el-input>
              <el-input
                  v-model="formData.formalContractCode"
                  clearable
                  searchLabel="合同正式编号"
                  placeholder="请输入合同正式编号模糊查询"
                  @blur="handleTrim('formalContractCode')"
              ></el-input>
              <el-input
                  v-model="formData.writeoffCode"
                  clearable
                  searchLabel="冲销单编号"
                  placeholder="请输入冲销单编号模糊查询"
                  @blur="handleTrim('writeoffCode')"
              ></el-input>
              <el-input
                  v-model="formData.settlementCode"
                  clearable
                  searchLabel="结算单编号"
                  placeholder="请输入结算单编号模糊查询"
                  @blur="handleTrim('settlementCode')"
              ></el-input>
              <el-input
                  v-model="formData.supplierName"
                  clearable
                  searchLabel="供应商"
                  placeholder="请输入供应商模糊查询"
                  @blur="handleTrim('supplierName')"
              ></el-input>
              <el-input
                  v-model="formData.reportInOrgName"
                  clearable
                  searchLabel="填报单位"
                  placeholder="请输入填报单位模糊查询"
                  @blur="handleTrim('reportInOrgName')"
              ></el-input>
          </template>
          <!-- 表单高级搜索 -->
          <el-input
              v-model="formData.writeoffName"
              clearable
              searchLabel="冲销单名称"
              placeholder="请输入冲销单名称模糊查询"
              slot="searchItem1"
              @blur="handleTrim('writeoffName')"
          ></el-input>
          <el-input
              v-model="formData.contractCode"
              clearable
              searchLabel="合同编号"
              placeholder="请输入合同编号模糊查询"
              slot="searchItem2"
              @blur="handleTrim('contractCode')"
          ></el-input>
          <el-input
              v-model="formData.formalContractCode"
              clearable
              searchLabel="合同正式编号"
              placeholder="请输入合同正式编号模糊查询"
              @blur="handleTrim('formalContractCode')"
              slot="searchItem3"
          ></el-input>
          <el-input
              v-model="formData.writeoffCode"
              clearable
              searchLabel="冲销单编号"
              placeholder="请输入冲销单编号模糊查询"
              slot="searchItem4"
              @blur="handleTrim('writeoffCode')"
          ></el-input>
          <el-input
              v-model="formData.settlementCode"
              clearable
              searchLabel="结算单编号"
              placeholder="请输入结算单编号模糊查询"
              slot="searchItem5"
              @blur="handleTrim('settlementCode')"
          ></el-input>
          <el-input
              v-model="formData.supplierName"
              clearable
              searchLabel="供应商"
              slot="searchItem6"
              placeholder="请输入供应商模糊查询"
              @blur="handleTrim('supplierName')"
          ></el-input>
          <el-input
              v-model="formData.reportInOrgName"
              clearable
              slot="searchItem7"
              searchLabel="填报单位"
              placeholder="请输入填报单位模糊查询"
              @blur="handleTrim('reportInOrgName')"
          ></el-input>
      </el-search>
    </div>
    <!-- 表格 -->
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :row-style="rowClass"
        border
        class="ccui-multifunctional-table"
        @header-dragend="tableTitleWidth"
        max-height="9999"
        v-if="draggFlag"
      >
        <el-table-column label="序号" width="60" :fixed="true">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="冲销单编号"
          width="180"
          :fixed="true"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span
              :style="{ color: 'rgb(0, 137, 239)', cursor: 'pointer' }"
              @click="handleGoDetail(scope.row)"
              >{{ scope.row.writeoffCode }}</span
            >
          </template>
        </el-table-column>
        <template v-for="(table, i) in unfixedTableThead">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="'two' + i"
            :label="table.label"
            :align="table.align || 'left'"
            :header-align="table.headerAlign || 'left'"
            :min-width="table.width"
            :prop="table.prop"
            :show-overflow-tooltip="true"
            border="true"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="true"
              size="mini"
              type="text"
              @click="handleGoEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="true"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="pageSizeCode"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @prev-click="handlePrev"
            @next-click="handleNext"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定</el-button
          >
        </div>
      </div>
    </div>
    <!-- 表格end -->
  </div>
</template>

<script>
import settlementMixins from "../mixins/settlement.js";

export default {
  name: "settlement-write-unsubmitted",
  mixins: [settlementMixins],
  data() {
    return {
      isActive: 1,
      tableName: this.tableList.settlementWrittenOffUnsubmitted // 表格命名
    };
  }
};
</script>
